import * as echarts from 'echarts';
import { useEffect,useState } from 'react';

const LineChartRight = () => {
    
    var option;
    let initLineMockData = []
    let test = '2022/09/11 00:00:00'
    for(let i=0;i<80;i++){
      let time = Date.parse(test)+600000*i
      let value 
      if(i<70){
        value = 0 + Math.random().toFixed(2)
      }else{
       value = (Math.random()*10).toFixed(2)
      }
      let arr = [time,value ]
      initLineMockData.push(arr)
    }
    const formatDate = (value) => {
      var date = new Date(value);
      var y = date.getFullYear(),
        m = date.getMonth() + 1,
        d = date.getDate(),
        h = date.getHours(),
        i = date.getMinutes(),
        s = date.getSeconds();
      if (m < 10) { m = '0' + m; }
      if (d < 10) { d = '0' + d; }
      if (h < 10) { h = '0' + h; }
      if (i < 10) { i = '0' + i; }
      if (s < 10) { s = '0' + s; }
      var t = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
      return t;
  }
    const dataPush = (i) => {
      let time = Date.parse(test)+600000*80+6000*i
      let value 
      value = (Math.random()*10).toFixed(2)
      
      let arr = [time,value ]
      initLineMockData.push(arr)
    }
    option = {
        backgroundColor:'',
      title: {
        left: 'center',
        text: '交通健康指数'
      },
      grid: {
        x: "12%",//x 偏移量
        y: "7%", // y 偏移量
        width: "87%", // 宽度
        height: "79%"// 高度
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          params = params[0];
          var date = new Date(params.name);
          return (
            (formatDate(params.value[0]))+
            '\n'+
            '指数:' +
            params.value[1]
          );
        },
        axisPointer: {
          animation: false
        }
      },
      xAxis: {
        type: 'time',
        splitLine: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
          show: false
        }
      },
      dataZoom: [
            
        {
          type: 'inside',
          start: 0,
          end: 100
        },
        {
        
          height:30,
          bottom:3,
          start: 0,
          end: 100
        }
      ],
      series: [
        {
          name: 'Fake Data',
          type: 'line',
          showSymbol: false,
          data:  initLineMockData
        }
      ]
    };
    useEffect(()=>{
        var chartDom = document.getElementById('line-chart-right');
        var myChart = echarts.init(chartDom, 'dark');
        let flag = 1
        window.addEventListener("resize", () => {
            myChart.resize();
          });
        setInterval(function () {
            flag++
            dataPush(flag)
            myChart.setOption({
              series: [
                {
                  data:  initLineMockData
                }
              ]
            });
          }, 1000);
        option && myChart.setOption(option);
    },[])
    return(
        <div id='line-chart-right' style={{width:'100%',height:'100%'}}>

        </div>
    )
}
export default LineChartRight
